<template>
  <div style="height: 400px;">
      <h2 class="title">申请记录</h2>
      <div v-if="task_list.length === 0">
        <img src="../../assets/空空如也.png" style="width: 100px;height: 100px;margin-left: 580px;margin-top: 90px;">
        <p style="margin-left: 560px;margin-top: 20px;">您还没有任何申请</p>
      </div>
      <ul v-else style="list-style-type: none;">
        <li v-for="item in task_list" :key="item.id" class="approval-item" style="display: flex; align-items: flex-start;">
          <div style="flex: 1;">
            <div style="margin-bottom: 15px;"><strong>申请名称:</strong> {{ item.workflow_name }}</div>
            <div style="margin-bottom: 15px;"><strong>申请人:</strong> {{ item.staff_name }}</div>
            <div style="margin-bottom: 15px;"><strong>申请结果:</strong> {{ item.get_task_status_display }}</div>
          </div>
          <el-timeline style="flex: 50px 50px 80px; margin-left: auto;">
            <el-timeline-item
              v-for="approval in item.approvals"
              :key="approval.id"
              :timestamp="approval.audit_time"
            >
              <div>{{ approval.audit_name }} - {{ approval.audit_status }}</div>
            </el-timeline-item>
          </el-timeline>
        </li>
      </ul>
  </div>
</template>

<script setup>
import { onMounted, ref } from "vue";
import http from "../../http/index.js";
import { ElMessage } from "element-plus";

let userid = ref('');
let task_list = ref([]);

const get_task = () => {
  http.get(`/app/task/get_stafftask_status/?staffid=${userid.value}`)
  .then(res => {
    if (res.data.code === 400) {
      task_list.value = [];
    } else {
      task_list.value = res.data.data.map(task => ({
        ...task,
        approvals: [] // 初始化每个任务的 approvals 数组
      }));
      task_list.value.forEach((task, index) => {
        http.get(`/app/approval/get_task_record/?task_id=${task.id}`)
        .then(res => {
          task_list.value[index].approvals = res.data.data;
        });
      });
    }
  })
  .catch(error => {
    console.error('Error fetching task list:', error);
    ElMessage.error("获取申请记录失败");
  });
};

onMounted(() => {
  userid.value = localStorage.getItem("userid");
  get_task();
});
</script>

  <style scoped>
  .item-content strong {
    width: 70px;
    color: #555;
  }
  .approval-item {
    background-color: #fff;
    border: 1px solid #ddd;
    border-radius: 4px;
    padding: 15px;
    margin-bottom: 15px;
    transition: box-shadow 0.3s ease;
    width: 500px;
    margin: auto;
    margin-top: 20px;
  }
  </style>